import {CartesianGrid, Line, LineChart, XAxis, YAxis} from 'recharts';
import {useEffect, useState} from "react";
import HttpRequestUtils from "../utils/HttpRequestUtils";
import gengzpMqApis from "../apis/apis";

/**
 * 仪表板页面
 */
const Dashboard = () => {

    // 消息计数
    const [messageCountData, setMessageCountData] = useState([]);
    // 死信消息计数
    const [deathMessageCountData, setDeathMessageCountData] = useState([]);

    useEffect(() => {
        queryReport();
        queryDeathMessageCount();
    }, []);

    /**
     * 查询消息生产数量报表信息
     */
    const queryReport = () => {
        HttpRequestUtils.post(gengzpMqApis.queryDashboardMessageCount).then(res => {
            if (res.code === 200) {
                setMessageCountData(res.data.map(v => {
                    return {
                        name: v.timeDescription,
                        uv: v.count
                    }
                }))
            }
        })
    }

    /**
     * 查询死信消息数量报表信息
     */
    const queryDeathMessageCount = () => {
        HttpRequestUtils.post(gengzpMqApis.queryDashboardDeathMessageCount).then(res => {
            if (res.code === 200) {
                setDeathMessageCountData(res.data.map(v => {
                    return {
                        name: v.timeDescription,
                        uv: v.count
                    }
                }))
            }
        })
    }

    return (
        <div>
            <div>
                <div style={{width: '100%', marginLeft: '20px', marginTop: '15px'}}>
                    <span style={{fontWeight: 'bolder', fontSize: '20px', color: '#009999'}}>近期生产的消息统计</span>
                </div>
                <div style={{width: '100%', display: 'flex', marginTop: '20px'}}>
                    <div style={{display: 'flex', justifyContent: 'center'}}>
                        <LineChart width={1400} height={300} data={messageCountData}>
                            <CartesianGrid/>
                            <Line dataKey="uv"/>
                            <XAxis dataKey="name"/>
                            <YAxis/>
                        </LineChart>
                    </div>
                </div>
            </div>

            <div style={{marginTop: '20px'}}>
                <div style={{width: '100%', marginLeft: '20px', marginTop: '15px'}}>
                    <span style={{fontWeight: 'bolder', fontSize: '20px', color: 'red'}}>近期新产生的死信消息统计（消费失败达到3次）</span>
                </div>
                <div style={{width: '100%', display: 'flex', marginTop: '20px'}}>
                    <div style={{display: 'flex', justifyContent: 'center'}}>
                        <LineChart width={1400} height={300} data={deathMessageCountData}>
                            <CartesianGrid/>
                            <Line dataKey="uv" stroke="red"/>
                            <XAxis dataKey="name"/>
                            <YAxis/>
                        </LineChart>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Dashboard;